<!-- demo0421.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>20231107131+陈哲+上机报告7</title>
<style type="text/css"> 
#menu{
	width: 726px; 
	border: 1px solid #999; 
	height: 26px;
	margin: 0px auto;
}
#menu ul{
	margin: 0px; 
	padding: 0px; 
	list-style: none; /*隐藏默认列表符号*/	
}
#menu ul li{
	background: #06C;
	width: 120px;
	height: 26px;
 	line-height: 26px; /*行距*/
	text-align:center;
	border-right: 1px solid #999; 	
	position:relative;
	float: left;
}
a{
	display:block; 
	font-size: 13px;
	color: #FFF;
	text-decoration: none;/*隐藏超链接默认下划线*/ 	
}
a:hover{
	color: #F00;
	font-size: 14px;
}
#menu ul li ul{
	display:none; /*默认隐藏*/
	top: 26px;
	width:150px; 
	border:1px solid #ccc; 
	border-bottom:none;
    position:absolute; 
	left: 0px;	
}
#menu ul li:hover ul{
    display:block;
}
#menu ul li:hover ul li a{
	display:block;
}
</style>
</head>
<body>
<div id="menu">    
    <ul>
        <li><a href="#">HTML</a></li>      
        <li><a href="#">CSS</a> 
         	<ul>
                <li><a href="#">Selector</a></li>
                <li><a href="#">Use CSS File in HTML</a></li>
                <li><a href="#">Formatting Document</a></li>
                <li><a href="#">Layout</a></li>
			</ul>
        </li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">Ajax</a></li>
    </ul>

</div>
</body>
</html>

